import React from 'react';
import { useNavigate } from 'react-router-dom';

const applied = [
  { name: '数据结构与算法', time: '周一 14:00-16:00', status: '已通过', credit: 3 },
  { name: '人工智能导论', time: '周五 14:00-16:00', status: '待审核', credit: 3 }
];

function AppliedCourses() {
  const nav = useNavigate();
  return (
    <div style={{ padding: '20px 16px 100px 16px' }}>
      {/* 返回按钮和标题 */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
        <button 
          onClick={() => nav('/teacher/profile')}
          style={{ 
            background: 'none', 
            border: 'none', 
            fontSize: 16, 
            color: '#666', 
            cursor: 'pointer',
            padding: '4px 8px',
            display: 'flex',
            alignItems: 'center',
            gap: 4
          }}
        >
          ← 返回
        </button>
      </div>
      
      <div style={{ fontSize: 22, fontWeight: 600, marginBottom: 18, color: '#222' }}>已申请课程</div>
      <div style={{ background: '#fff', borderRadius: 10, boxShadow: '0 1px 6px #f0f1f5', padding: '26px 20px' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', background: '#f9fbfc', borderRadius: 8 }}>
          <thead>
            <tr style={{ background: '#f4f7fc', color: '#444', fontWeight: 500 }}>
              <th style={{ padding: 12, borderBottom: '1px solid #ededed' }}>课程名称</th>
              <th style={{ padding: 12, borderBottom: '1px solid #ededed' }}>上课时间</th>
              <th style={{ padding: 12, borderBottom: '1px solid #ededed' }}>学分</th>
              <th style={{ padding: 12, borderBottom: '1px solid #ededed' }}>审核状态</th>
            </tr>
          </thead>
          <tbody>
            {applied.map((c, idx) => (
              <tr key={idx} style={{ borderBottom: '1px solid #f3f3f3', color: '#333', textAlign:'center' }}>
                <td style={{ padding: 12 }}>{c.name}</td>
                <td style={{ padding: 12 }}>{c.time}</td>
                <td style={{ padding: 12 }}>{c.credit}</td>
                <td style={{ padding: 12, color: c.status === '待审核'? '#faad14':'#52c41a' }}>{c.status}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
export default AppliedCourses;

